<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <img src="imgs/clock.png" alt="">
    </div>
    <div>
        <p>2024年11月05日 10:03:11</p>
        <div>
            <button onclick="start()">开始</button>
            <button onclick="stop()">暂停</button>
        </div>
    </div>
    <script>
        function padding(param) {
            return param < 10 ? '0' + param : param
        }
        function getCurTime() {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = padding(date.getDate())
            var hour = padding(date.getHours())
            var min = padding(date.getMinutes())
            //TODO：< 10, 秒数前+ '0'
            var sec = padding(date.getSeconds())
            var show_tag = document.querySelector('p')
            show_tag.innerText = `${year}年${month}月${day}日 ${hour}:${min}:${sec}`
        }
        var timer
        function start() {
            timer = setInterval(function () {
                getCurTime()
            }, 1000)
            console.log(timer)       
        }
        //TODO: 正确关闭定时器
        function stop() {
            clearInterval(timer)
        }
        onload = function () {
            start()
        }
    </script>
</body>
</html>